window.addEventListener('load',function () {
	var ul=document.querySelector('.li').querySelector('ul');
 	var li=document.querySelector('.li');
	var index=0;
	var w=0;
	var timer;
	timer=setInterval(function(){
	index++;
	w=li.offsetWidth;
	var transformX=-index*w;
	ul.style.transition='transform 0.5s';
	ul.style.transform='translateX('+transformX+'px)';
	},1500);
	ul.addEventListener('transitionend',function (){
		if(index>=3){
			index=0;
			console.log(index);
			ul.style.transition='none';
			var transformX=-index*w;
			ul.style.transform='translateX('+transformX+'px)';
		}
	})
	ul.addEventListener('touchstart',function(){
		clearTimeout(timer);
	});
	ul.addEventListener('touchend',function(){
		clearInterval(timer);
		timer=setInterval(function(){
		index++;
		w=li.offsetWidth;
		var transformX=-index*w;
		ul.style.transition='transform 0.3s';
		ul.style.transform='translateX('+transformX+'px)';
		},1500);
		ul.addEventListener('transitionend',function (){
			if(index>=3){
				index=0;
				console.log(index);
				ul.style.transition='none';
				var transformX=-index*w;
				ul.style.transform='translateX('+transformX+'px)';
			}
		})
	})
})
	

